<!--
 * @Description: 添加组件，蒙层对话框
 * @Author: youzi
 * @Date: 2020-05-20 14:11:14
 * @LastEditors: youzi
 * @LastEditTime: 2020-10-21 10:57:47
-->
<template>
  <modal
    :visible="visible"
    title="物流信息"
    okText="发货"
    @cancelHandler="onClose"
    @okHandler="handleSubmit"
    :destroyOnClose="true"
    :width="600"
    :bodyHeight="0.8"
    :loading="loading"
  >
    <template slot="content">
      <a-spin :spinning="loading" :delay="200" tip="提交中...">
        <a-form :form="form">
          <a-form-item label="物流公司" v-bind="formItemLayout">
            <a-select
              :showArrow="true"
              showSearch
              v-decorator="[`expressCompany`, { rules: [{ required: true, message: '物流公司不能为空' }]}]"
              placeholder="请选择物流公司"
              :filter-option="projectIdIdFilterOption"
            >
              <a-select-option v-for="d in companyItems" :key="d.code">{{ d.name }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="物流单号" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'expressNo',
                { rules: [{ required: true, message: '物流单号不能为空' }, { max: 30, message: '字数不能超过30字' }]}
              ]"
              placeholder="请输入物流单号"
            />
          </a-form-item>
        </a-form>
      </a-spin>
    </template>
  </modal>
</template>
<script>
import modal from '~/tool/modal';
import { regexp } from 'utils/common';

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 12 }
};

export default {
  name: 'send',
  components: { modal },
  props: {
    initRecord: {
      type: Object,
      default: () => ({})
    },
    visible: {
      default: false
    },
    // 需要的api
    apiURL: {
      type: Object,
      default: () => {}
    },
    // 物流公司
    companyItems: {
      type: Array,
      value: []
    },
  },
  data() {
    return {
      regexp,
      loading: false,
      formItemLayout,
      form: this.$form.createForm(this),
    };
  },
  methods: {
    // 关键字选择物流公司
    projectIdIdFilterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    /**
     * @desc: 渲染selection
     * @author: youzi
     */
    reset() {
      this.loading = false;
      this.form.resetFields();
    },
    onClose() {
      this.$confirm({
        title: '确定放弃编辑吗？',
        content: '',
        okText: '确定',
        cancelText: '取消',
        onOk: this.onCloseConfirm
      });
    },
    onCloseConfirm() {
      this.reset();
      this.$emit('close');
    },
    handleSubmit() {
      // debugger;
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$confirm({
            title: '确定发货吗？',
            content: '',
            okText: '确定',
            cancelText: '取消',
            onOk: this.handleConfirmSubmit
          });
        }
      });
    },
    handleConfirmSubmit() {
      let that = this;
      this.loading = true;
      let tmpObj = this.form.getFieldsValue();
      console.log(tmpObj);
      tmpObj.id = that.initRecord.id;
      for (var i = 0; i < that.companyItems.length; i++) {
        let companyItem = that.companyItems[i];
        if (companyItem.code == tmpObj.expressCompany) {
          tmpObj.expressCompanyName = companyItem.name;
          break;
        }
      }
      console.log(tmpObj);
      that.$post(this.apiURL.sendRecords, {
        ...tmpObj
      })
        .then(r => {
          that.reset();
          that.$emit('success');
        })
        .catch(() => {
          that.loading = false;
        });
    }
  },
  mounted() {}
};
</script>
